<template>
  <div class="forget-container">
    <div class="header">
      <h4>学生成绩管理系统</h4>
    </div>
    <div style="position: relative;">
      <div class="bg1"></div>
      <el-form class="login-form" :model="passData" :rules="rules" ref="passData">
        <el-form-item prop="account">
          <div class="UserName">
            <svg-icon icon-class="user1" :class="'phone'" />
            <el-input name="username" type="text" placeholder="请输入帐号" v-model="passData.account" maxlength="11" />
          </div>
        </el-form-item>
        <el-form-item prop="question">
          <div class="Password">
            <svg-icon icon-class="password" :class="'icon-password'" />
            <el-select v-model="passData.question" class="password" placeholder="选择密保问题">
              <el-option value="1" label="你的小学班主任姓名?"></el-option>
              <el-option value="2" label="你的初中班主任姓名?"></el-option>
              <el-option value="3" label="你的高中班主任姓名?"></el-option>
              <el-option value="4" label="你的喜欢的运动?"></el-option>
              <el-option value="5" label="你的喜欢的食物?"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="answer">
          <div class="Password">
            <svg-icon icon-class="password" :class="'icon-password'" />
            <el-input class="password" placeholder="请输入密保答案" v-model="passData.answer" maxlength="16"
                      type="password"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="newpassword">
          <div class="Password">
            <svg-icon icon-class="password" :class="'icon-password'" />
            <el-input class="password" placeholder="请输入新密码" v-model="passData.newpassword" maxlength="16"
                      type="password"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="Password">
            <svg-icon icon-class="password" :class="'icon-password'" />
            <el-input class="password" placeholder="请确认新密码" v-model="passData.password" maxlength="16"
                      type="password"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="t-center">
            <el-button class="btn" @click="retrievePassword" type="primary">提交</el-button>
          </div>
        </el-form-item>
        <p @click="navTo('/login')" class="login-btn">返回登录</p>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      let ext = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,18}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!ext.test(value)) {
        callback(new Error("密码必须为6-18位的字母+数字组合"));
      } else {
        if (this.passData.newpassword !== "") {
          this.$refs.passData.validateField("password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passData.newpassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      backgroudImg: "",
      passData: {
        account: "",
        question: "",
        answer: "",
        newpassword: "",
        password: "",
      },
      msg: "获取验证码",
      pwdType: "password",
      pwdType1: "password",
      rules: {
        account: [
          { required: true, message: "请输入帐号", trigger: "blur" },
        ],
        question: [
          { required: true, message: "密保问题不能为空", trigger: "blur" },
        ],
        answer: [
          { required: true, message: "密保答案不能为空", trigger: "blur" },
        ],
        newpassword: [
          { validator: validatePass, trigger: "blur" }
        ],
        password: [
          { validator: validatePass2, trigger: "blur" }
        ],
      },
    };
  },
  methods: {
    navTo(path, query = {}) {
      this.$router.push({ path, query });
    },
    retrievePassword() {
      this.$refs["passData"].validate((valid) => {
        if (valid) {
          if (this.passData.newpassword !== "" && this.passData.password !== "") {
            if (this.passData.newpassword == this.passData.password) {
              let params = {
                account: this.passData.account,
                securityAnswer: this.passData.question,
                securityQuestion: this.passData.answer,
                newPassword: this.passData.password,
              };
              //   todo 根据密保重置密码
              this.$api.login.forgotPassword(params)
              .then(()=>{
                 this.$message.success("修改成功");
                 this.$router.push("/login")
              })
            } else {
              this.$message.error("两次密码输入不一样");
            }
          } else {
            this.$message.error("请输入密码!");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.forget-container {
  .el-form-item__error {
    padding-top: 0px;
    left: 82px;
    top: 96%;
  }

  .backgroudImg {
    width: 100%;
    height: 100%;
  }

  .el-input {
    display: inline-block;

    input {
      -webkit-appearance: none;
      border-radius: 0px;
      color: #999;
      border: none;
      width: 260px;
      height: 42px;
      text-align: left;
      border-left: 1px solid #dcdcdc !important;

      &:-webkit-autofill {
        -webkit-text-fill-color: #999 !important;
        transition: background-color 5000s ease-in-out 0s;
        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
      }

      &::-webkit-input-placeholder {
        color: #999999;
      }

      &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #999999;
        opacity: 1;
      }

      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #999999;
        opacity: 1;
      }

      &:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #999999;
      }

      &::-ms-input-placeholder { /* Microsoft Edge */
        color: #999999;
      }
    }
  }

  .el-form-item {
    border-radius: 5px;
    color: #454545;
  }
}
</style>
<style lang="scss">
@import url('./forget.scss');
</style>


